<template>
  <div class="base-root">
    <div class="loop-box" v-for="(item, index) in dataList" :key="index">
      <div class="item">
        <span class="name-box">{{item.name}}</span>
        <span :style="styleObject" class="fix-lable" v-if="item.isLable && item.value">{{item.value}}</span>
        <span :style="styleObject" class="fix" v-else>{{item.value}}</span>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "PublicCell",
    props: {
      dataList: { // 控制第二行是否脱敏
        type: Array,
        required: true
      },
      fontStyle: {
        type: [String, Object],
        default: ''
      }
    },
    computed: {
      styleObject() {
        if (typeof this.fontStyle === 'string') {
          // 把字符串样式解析成对象，例如 "color:#4876FF;font-weight:bold;"
          return this.fontStyle
            .split(';')
            .filter(Boolean)
            .reduce((acc, cur) => {
              const [key, value] = cur.split(':')
              if (key && value) {
                acc[key.trim()] = value.trim()
              }
              return acc
            }, {})
        }
        return this.fontStyle
      }
    },
    methods: {

    }
  };
</script>

<style scoped>
  .loop-box{
    display: flex;
  }
  .item {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
  }
  .fix{
    margin-left: 10px;
  }
  .fix-lable{
    margin-left: 10px;
    background-color:#4876FF;
    padding: 2px 4px;
    border-radius: 2px;
    color: #ffffff !important;
    white-space: nowrap;

  }
</style>
